<template>
  <el-card>
    <el-form :model="searchParam" :inline="true">
      <el-form-item label="部门名称">
        <el-input
          v-model="searchParam.deptName"
          placeholder="请输入部门名称"
          clearable
          @keyup.enter="getTreeData"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="searchParam.status"
          placeholder="请选择状态"
          @keyup.enter="getTreeData"
        >
          <el-option
            v-for="(value, key, index) in dictObj"
            :key="index"
            :label="value"
            :value="key"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <commonBtn
          :value="'搜索'"
          :type="'primary'"
          :icon="'search'"
          :plain="true"
          @click="getTreeData"
        ></commonBtn>
        <commonBtn
          :value="'重置'"
          :icon="'refresh'"
          @click="refreshFn"
        ></commonBtn>
      </el-form-item>
    </el-form>
    <el-row>
      <commonBtn
        :value="'新增'"
        :type="'primary'"
        :icon="'plus'"
        :plain="true"
        @click="addDeptFn"
      ></commonBtn>
      <commonBtn
        :value="'展开/折叠'"
        :type="'info'"
        :icon="'sort'"
        :plain="true"
        @click="changeExpand"
      ></commonBtn>
    </el-row>
    <el-table
      :data="searchParam.data"
      row-key="id"
      default-expand-all
      ref="xTree"
      :tree-props="{ children: 'children' }"
      v-loading="isLoad"
    >
      <el-table-column label="部门名称" prop="deptName"></el-table-column>
      <el-table-column
        label="排序"
        prop="orderNum"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status == '0'">{{
            scope.row.statusDict
          }}</el-tag>
          <el-tag type="danger" v-if="scope.row.status == '1'">{{
            scope.row.statusDict
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <editBtn :value="'编辑'" @click="editDept(scope.row)" />
          <operBtn
            :value="'新增'"
            :icon="'plus'"
            class="operBtn"
            @click="lineAdd(scope.row.id)"
          />
          <delBtn
            :value="'删除'"
            v-if="scope.row.parentId != 0"
            @click="delDeptFn(scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <addEdit
      :layer="layer"
      @getTableData="getTreeData"
      :selectData="selectData"
      :statusObj="dictObj"
      v-if="layer.show"
    ></addEdit>
  </el-card>
</template>
<script>
import {
  defineComponent,
  reactive,
  ref,
  getCurrentInstance,
  computed,
} from "vue";
import { queryDict } from "@/api/dictValue.js";
import commonBtn from "_c/commonBtn/index.vue";
import { getTree, delDept } from "@/api/dept.js";
import editBtn from "_c/editBtn/index.vue";
import delBtn from "_c/delBtn/index.vue";
import operBtn from "_c/operBtn/index.vue";
import addEdit from "./addEdit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
export default defineComponent({
  components: {
    commonBtn,
    editBtn,
    delBtn,
    operBtn,
    addEdit,
  },
  setup() {
    //表格数据加载
    const isLoad = ref(true);
    //控制树形展开与折叠
    const isExpand = ref(true);

    //树形表格引用
    const xTree = ref(null); //注册
    // 弹窗控制器
    const layer = reactive({
      show: false,
      title: "新增",
      showButton: true,
      width: 500,
    });
    //搜索条件
    const searchParam = reactive({
      deptName: "",
      status: "",
      data: [],
    });
    //用于存储数据字典数据
    const dictObj = ref({});
    //查询数据字典值
    const queryDic = async () => {
      const { data } = await queryDict("dept_status");
      dictObj.value = data;
    };
    queryDic();
    //查询树形数据
    const getTreeData = async () => {
      let params = {
        deptName: searchParam.deptName.trim() || undefined,
        status: searchParam.status || undefined,
      };
      const { data, success } = await getTree(params);
      if (success) {
        searchParam.data = data;
        isLoad.value = false;
      }
    };
    getTreeData();
    //树形结构赋值 (循环数据赋值)
    const TabData = (data, status) => {
      data.forEach((i) => {
        xTree.value.toggleRowExpansion(i, status);
      });
    };

    //展开关闭控制方法
    const changeExpand = () => {
      //设置开关标记
      isExpand.value = !isExpand.value;
      TabData(searchParam.data, isExpand.value);
    };
    //控制弹框-新增
    const addDeptFn = () => {
      layer.title = "新增部门";
      layer.show = true;
      delete layer.row;
    };
    //编辑字典
    const editDept = (row) => {
      layer.title = "编辑部门";
      layer.show = true;
      layer.row = {
        id: row.id,
        parentId: row.parentId,
        deptName: row.deptName,
        orderNum: row.orderNum,
        leader: row.leader,
        phone: row.phone,
        email: row.email,
        status: row.status,
        flag: true,
      };
    };

    //行内操作： 增加
    const lineAdd = (id) => {
      layer.title = "新增部门";
      layer.show = true;
      layer.row = {
        parentId: id,
      };
    };
    //递归构造数据
    const getSelectData = (obj) => {
      let temp = {};
      temp.label = obj.deptName;
      temp.value = obj.id;
      if (obj.children) {
        let arr = [];
        obj.children.forEach((item) => {
          arr.push(getSelectData(item));
        });
        temp.children = arr;
      }
      return temp;
    };
    //定义需要传入子组件的数据
    const selectData = computed(() => {
      let obj = [];
      if (searchParam.data) {
        searchParam.data.forEach((item) => {
          obj.push(getSelectData(item));
        });
      }
      return obj;
    });
    //重置搜索条件
    const refreshFn = () => {
      searchParam.deptName = "";
      searchParam.status = "";
      getTreeData();
    };
    //删除
    const delDeptFn = (id) => {
      if (id) {
        ElMessageBox.confirm("您确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const { success } = await delDept({ id: id });
            if (success) {
              ElMessage.success("删除成功！");
              getTreeData();
            }
          })
          .catch(() => {
            ElMessage.info("取消成功！");
          });
      }
    };
    return {
      isLoad,
      xTree,
      isExpand,
      layer,
      searchParam,
      dictObj,
      getTreeData,
      changeExpand,
      addDeptFn,
      selectData,
      editDept,
      refreshFn,
      lineAdd,
      delDeptFn,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: left;
}
.el-table {
  margin-top: 15px;
}
.operBtn {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
